<template>
  <slide-view
    v-empty="!canShowDetail"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{padding: 0, height: '100%'}"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
    class="detail-container"
    @close="hideView">
    <flexbox
      v-loading="loading"
      direction="column"
      class="detail-main">

      <detail-header
        :btn-group="btnGroup"
        :more-btn-group="moreBtnGroup"
        :detail-data="detailData"
        :fields="headerFields"
        :label="detailData.productName"
        :type-name="typeObj.name"
        :icon="`wk wk-${typeObj.icon}`"
        :icon-color="typeObj.color"
        @command="handleCommand" />

      <flexbox-item
        style="margin-left: -1px; margin-right: -2px"
        class="tab-container">
        <el-tabs
          v-model="currentTab"
          type="border-card">
          <el-tab-pane
            v-for="(tab, index) in tabs"
            :key="index"
            :label="tab.label"
            :name="tab.name"
            lazy>
            <component
              v-if="detailData.batchId"
              :is="tab.name"
              :id="id"
              :label="typeObj.label"
              :batch-id="detailData.batchId"
              :detail-data="detailData" />
          </el-tab-pane>
        </el-tabs>
      </flexbox-item>
    </flexbox>

    <add-size
      v-if="detailData.batchId"
      v-model="showAddSize"
      :batch-id="detailData.batchId"
      @update="handleUpdateList" />

    <create-com
      v-if="showCreate"
      :type="type"
      :id="id"
      :batch-id="detailData.batchId"
      @update="handleRefresh"
      @close="showCreate = false" />
  </slide-view>
</template>

<script>
import { jxcProductQueryByIdAPI, jxcProductUpdateShelfAPI, jxcProductDeleteByIdsAPI } from '@/api/jxc/product'

import TabPurchaseList from './components/TabPurchaseList'
import AddSize from './components/AddSize'
import CreateCom from '../components/Create/CreateCom'

import DetailListenerMixin from '../mixins/DetailListener'
import { objDeepCopy } from '@/utils'

export default {
  name: 'JXCProductDetail',
  components: {
    TabPurchaseList,
    AddSize,
    CreateCom
  },
  mixins: [DetailListenerMixin],
  data() {
    return {
      detailRequest: jxcProductQueryByIdAPI,
      deleteRequest: jxcProductDeleteByIdsAPI,

      btnGroup: [],
      moreBtnGroup: [],
      headerFields: [
        { fieldName: '产品类别', field: 'productType' },
        { fieldName: '产品单位', field: 'productCompany' },
        { fieldName: '市场价', field: 'productMarketPrice', isMoneyField: true },
        { fieldName: '创建时间', field: 'createTime' }
      ],

      currentTab: 'TabBaseInfo',
      tabs: [
        { label: '基本信息', name: 'TabBaseInfo' },
        { label: '附件', name: 'TabFile' },
        { label: '操作记录', name: 'TabRecordList' }
      ],

      showAddSize: false,
      showCreate: false
    }
  },
  watch: {
    detailData: {
      handler(val) {
        if (val) {
          this.btnGroup = [
            {
              btnText: '新增规格',
              command: 'save',
              type: 'primary',
              btnClass: 'xr-btn--primary',
              icon: ''
            },
            {
              btnText: '编辑',
              command: 'update',
              type: 'primary',
              btnClass: 'xr-btn--green',
              icon: 'wk wk-circle-edit'
            }
          ]
          if (val.productIsp != 1) {
            this.btnGroup.splice(0, 1)
          }
          this.moreBtnGroup = [
            {
              label: '删除',
              command: 'delete',
              icon: 'wk wk-delete'
            }
          ]
          if (val.productIshelf == 1) {
            this.moreBtnGroup.unshift({
              label: '下架',
              command: 'self',
              icon: 'wk wk-sold-out'
            })
          } else {
            this.moreBtnGroup.unshift({
              label: '上架',
              command: 'self',
              icon: 'wk wk-shelves'
            })
          }
          this.copyBtnGroup = objDeepCopy(this.btnGroup || [])
          this.copyMoreBtnGroup = objDeepCopy(this.moreBtnGroup || [])
          this.checkBtnAuth()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'save':
          // 新增规格
          this.showAddSize = !this.showAddSize
          break
        case 'update':
          // 编辑
          this.showCreate = !this.showCreate
          break
        case 'delete':
          // 删除
          this.handleDelete()
          break
        case 'self':
          this.handleUpdateSale()
          break
      }
    },

    /**
     * 产品上架/下架
     */
    handleUpdateSale() {
      const status = this.detailData.productIshelf == 1 ? '下架' : '上架'
      this.$confirm(`确定要${status}该产品吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        jxcProductUpdateShelfAPI({
          ids: this.detailData.productId,
          shelf: status === '上架' ? 1 : 0
        }).then(() => {
          this.loading = false
          this.$message.success(`${status}成功`)
          this.handleRefresh()
          this.handleUpdateList()
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../styles/detail";
</style>
